{% extends "base.html" %} {% block title %}留言{% endblock %} {% block head %}
<style type="text/css">
  #chat-wrapper {
    width: 300px;
    height: 500px;
    border: 1px solid #ccc;
  }

  #chat-header {
    padding: 10px;
    background-color: #f8f8f8;
  }

  #chat-header h1 {
    margin: 0;
  }

  #chat-body {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  #chat-messages {
    flex: 1;
    padding: 10px;
    overflow-y: scroll;
  }

  #chat-input {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  #chat-input input {
    flex: 1;
    padding: 5px;
  }

  #chat-input button {
    margin-left: 10px;
  }
</style>
{% endblock %} {% block content %}
<div class="page">
  <div class="page__hd">
    <h1 class="page__title">可留言，对方在线可聊天</h1>
    <p class="page__desc">
      请先点击开启留言按钮打开websocket，然后在输入框中输入留言内容，回车即可发送留言。
    </p>
  </div>
  <div class="page__bd">
    <!-- <div id="chat-wrapper">
      <div id="chat-header">留言</div>
      <div id="chat-body">
        <div id="chat-messages"></div>
        <div id="chat-input">
          <input type="text" placeholder="请输入消息..." />
          <button type="button">发送</button>
        </div>
      </div>
    </div> -->
    <button id="join_btn" type="button">开启留言</button>
    <textarea id="chat" style="
        display: block;
        width: 375px;
        height: 300px;
        box-sizing: border-box;
      " cols="30" rows="10"></textarea>
    <input id="input" style="display: block; width: 375px; box-sizing: border-box" type="text" placeholder="chat" />
  </div>
</div>

<script type="text/javascript">
  const join_btn = document.querySelector("#join_btn");
  const textarea = document.querySelector("#chat");
  const input = document.querySelector("#input");
  const yourname = `{{yourname}}`;
  const myname = `{{myname}}`;

  console.log('name,', yourname, myname);

  join_btn.addEventListener("click", function (e) {
    this.disabled = true;

    const websocket = new WebSocket("wss://libs.91demo.top/wsbook");

    websocket.onopen = function () {
      console.log("connection opened");
      textarea.value += "留言功能已打开" + "\r\n";
    };

    const btn = this;

    websocket.onclose = function () {
      console.log("connection closed");
      btn.disabled = false;
    };

    websocket.onmessage = function (e) {
      console.log("received message: " + e.data);
      const obj = JSON.parse(e.data);
      textarea.value += obj.from + ":" + obj.content + "\r\n";
    };

    input.onkeydown = function (e) {
      if (e.key == "Enter") {
        const value = input.value;
        if (value == ""){
          return;
        }
        const msg = {
          "from": myname,
          "dest": yourname,
          "content": value,
          "send_time": new Date().getTime(),
        }
        const msg_str = JSON.stringify(msg);
        websocket.send(msg_str);
        textarea.value += "我:"+value + "\r\n";
        input.value = "";
      }
    };
  });

  // const input2 = document.querySelector("#chat-input input");
  // const button = document.querySelector("#chat-input button");
  // const messages = document.querySelector("#chat-messages");

  // button.addEventListener("click", sendMessage);

  // function sendMessage() {
  //   const message = input2.value;
  //   if (message) {
  //     const messageElement = document.createElement("div");
  //     messageElement.textContent = message;
  //     messages.appendChild(messageElement);
  //     input2.value = "";
  //   }
  // }
</script>
{% endblock %}